<template>
  <MyChart id="pie" :pieType="pieType">
    御剑乘风来,除魔天地间!
  </MyChart>
</template>
<script>
import MyChart from './MyChart.vue';
import obj from './index'
export default {
  name: '',
  components: {
    MyChart
  },
  props: ['pieType'],
  data() {
    return {
      pieType: obj[this.pieType]()
    }
  },
  created() {
  },
  computed: {
  },
  methods: {
  },
  mounted() {
    function getRandom(num) {
      return Math.floor(Math.random() * num);
    }
    var time = ['2017', '2018', '2019']
    let dashedPic = '';
    let color = ['#FF8700', '#ffc300', '#00e473', '#009DFF', '#0034ff'];

    var optionsData = [];

    let chartData2 = [
      {
        time: '2017',
        chartData: [{
          name: "尖用电量",
          value: getRandom(1000) * 100
        },
        {
          name: "峰用电量",
          value: getRandom(1000)
        },
        {
          name: "平用电量",
          value: getRandom(1000)
        },
        {
          name: "谷用电量",
          value: getRandom(1000)
        }
        ]
      },
      {
        time: '2018',
        chartData: [{
          name: "尖用电量8",
          value: getRandom(1000)
        },
        {
          name: "峰用电量",
          value: getRandom(1000)
        },
        {
          name: "平用电量",
          value: getRandom(1000)
        },
        {
          name: "谷用电量",
          value: getRandom(1000)
        }
        ]
      },
      {
        time: '2019',
        chartData: [{
          name: "尖用电量9",
          value: getRandom(1000)
        },
        {
          name: "峰用电量",
          value: getRandom(1000)
        },
        {
          name: "平用电量",
          value: getRandom(1000)
        },
        {
          name: "谷用电量",
          value: getRandom(1000)
        }
        ]
      }
    ]
    chartData2.forEach(({ chartData }) => {
      let arrName = [];
      // [200, 3397, 5400, 11021]
      let arrValue = [];
      // 20018
      let sum = 0;
      let pieSeries = [],// 显示颜色圆环
        lineYAxis = [];//legend
      // 数据处理
      chartData.forEach((v) => {
        arrName.push(v.name);
        arrValue.push(v.value);
        sum = sum + v.value;
      })
      // 图表option整理
      chartData.forEach((v, i) => {
        // 显示颜色圆环
        pieSeries.push({
          // name: '分布情况111',
          type: 'pie',
          clockWise: false,
          radius: [75 - i * 15 + '%', 67 - i * 15 + '%'],
          center: ["40%", "50%"],
          label: {
            show: false
          },
          data: [{
            value: v.value,//200
            name: v.name //尖用电量
          }, {
            value: sum - v.value,// 19818
            name: '',
            itemStyle: {
              color: "rgba(0,0,0,0)" // 每一个圆环
            }
          }]
        });
        // 底部大圆环3/4
        pieSeries.push({
          // name: '用电量分布情况',
          type: 'pie',
          silent: true,
          z: 1,
          clockWise: false, //顺时加载
          radius: [75 - i * 15 + '%', 67 - i * 15 + '%'],
          center: ["40%", "50%"],
          data: [{
            value: 7.5,
            itemStyle: {
              color: "#E3F0FF"
            }
          }, {
            value: 2.5,
            name: '',
            itemStyle: {
              color: "rgba(0,0,0,0)"
            }
          }]
        });
        //legend
        lineYAxis.push({
          value: i,
          textStyle: {
            rich: {
              circle: {
                color: color[i],
                padding: [0, 5]
              }
            }
          }
        });
      })

      optionsData.push({
        color: color,
        grid: {
          top: '12%',
          bottom: '54%',
          left: "40%",
        },
        xAxis: [{
          show: false
        }],
        yAxis: [{
          type: 'category',
          inverse: true,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            formatter: function (params) {
              let item = chartData[params];
              return '{line|}{circle|●}{name|' + item.name + '}{bd||}{value|' + item.value + '}'
            },
            interval: 0,
            inside: true,
            textStyle: {
              color: "#333",
              fontSize: 14,
              rich: {
                line: {
                  width: 60,
                  height: 10,
                  backgroundColor: { image: dashedPic }
                },
              }
            },
            show: true
          },
          data: lineYAxis
        }],

        series: pieSeries
      });
    })
  }
}
</script>
<style lang='less' scoped></style>
